<template>
    <div class="sex">
        <div class="title">
            <p>男女比例</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="xb">
            <div class="man">
                <img src="../../images/man.png" alt="">
            </div>
            <div class="woman">
                <img src="../../images/woman.png" alt="">
            </div>
        </div>
        <div class="rate">
            <p>男士58%</p>
            <p>女士42%</p>
        </div>
        <!-- 图形图表 -->
        <div class="charts" ref="charts">

        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const charts = ref()
// 挂载的时候初始化echart实例
onMounted(() => {
    let myChart = echarts.init(charts.value)
    // 设置配置项
    myChart.setOption({
        title: {
            text: '男女比例',//主标题的颜色
            textStyle: {
                color: '#777',
            },
            left: '40%',
            xAxis: {
                show: false
            },
            yAxis: {
                show: false,
                type: 'category',
            },
            series: [{
                // 男士
                type: 'bar',
                data: [80],
                barWidth: 20,
                itemStyle: {
                    borderRadius: 20,
                    color: '#000'
                },
            },
            {
                // 女士
                type: 'bar',
                data: [100],
                barWidth: 20,
                barGap: '-100%',
                itemStyle: {
                    borderRadius: 20,
                    color: '#fff'
                },
                z: 100,
            }],
            grid: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
            }
        }
    })
})
</script>

<style lang="scss" scoped>
.sex {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;

    .title {
        margin-left: 10px;

        p {
            font-size: 20px;
            color: #fff;

        }
    }

    .xb {
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 111px;
            height: 115px;
            object-fit: cover;
        }

        .man {
            margin-right: 20px;
            background-color: #251cd3;
        }

        .woman {
            background-color: #88484b;
        }
    }

    .rate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 18px;
        padding: 10px;
    }

    .charts {
        width: 100%;
        height: 100px;
        // margin-top: 70px;
    }
}
</style>